OLD HOMEPAGE
The Problem
The reason for updating the website, in this example the homepage, was that we recognized that we could focus on what TreeRing offers, hit on the main features one looks for in a yearbook company, how we do it better than our competitors, and earn trust. On top of that, it could use an update to be more current.
REDESIGNED HOMEPAGE
The Solution
Show the product upfront, build trust from the user and hit on all the important features that one would look for in a yearbook company.
Animation
This animation appears on the first panel image of the homepage. After a brainstorming session with stakeholders, as a team we created the tagline “Yearbooks Updated” – the meaning is to get across that we are the leader in yearbooks and we are technologically advanced. This reinforces to schools that they no longer have to stick with old-school yearbook companies that make you sign long-term contracts and buy a certain number of yearbooks up-front. We are a print-on-demand company and help schools get out of debt from years of leftover yearbooks.
Animation
Numbers filling with liquid appear on the second panel of the homepage. Stakeholders really wanted to show that we are a trusted company, and it was important to them that we state facts about the company and place it at the top of the page. To draw attention to the facts, we added animation.
Over 4 million trees planted and 11 years in business.
Animation
We named this guy Kyle, the pig! He smiles and winks at the fact that we are at no cost to the school, and we don't use contracts.
Animation
The leaf from the logo drifts off, and back onto the "i" in a soft manner. This was for a baby photo book app which TreeRing created.
Brand Identity
TreeRing's brand colors are green and gray, and font choice is Lato. The leaf is pulled from the logo and used as a design element for the brand. The dashed line shows the trail of a falling leaf that travels down the page drawing your eye where to look next.
We conducted an A/B test with our previous buttons, which were solid green, and the new button which is white with a green outline and larger. The new, larger button increased engagement. The reason we designed the button to be white with a green outline is that we found design hurdles when the button was solid green. It interfered with the design and didn't stand out, limiting us in backgrounds.
In this page, I show how I used the dashed line and falling leaf when the page is text-heavy. It's use is to help one move through the page and break up the text.
Alternate Proposed Design
Other design iterations were mocked up, this is one of our favorites. The main image targeted our three main buyer types: teachers, parents and students, which is the main reason this didn't make the cut – stakeholders did not want to call those buyer types out. This design also introduced a new color to the palette – plum purple – and utilized our less-used orange color, which was part of our Brand ID.
